<h:panelGroup xmlns="http://www.w3.org/1999/xhtml"
              xmlns:rich="http://richfaces.org/rich"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:b="http://bootsfaces.net/ui"
              xmlns:a4j="http://richfaces.org/a4j"
              xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

    <h:form>
        <div class="container" >


            <div class="panel panel-body">
                <div class="panel-heading" style="background-color: #ffffff">

                    <h:panelGrid columns="5">
                        <h:graphicImage width="350" height="100" value="/resources/images/kiwik mark 2.png" />

                        <h:graphicImage width="400" height="100" value="/resources/images/blanco.png" />
                        <h:panelGrid rendered="#{sessionBean.clienteSesion == null}">
                            <h:panelGrid columns="3">

                                <h:commandButton 
                                    style="  border-radius: 45px  12px;
                                    font-size: 20px;
                                    background-color: #dd0a07;
                                    color: #ffffff;
                                    box-shadow: inset 0px 0px 100px #dd8e0a;
                                    " 
                                    value="Iniciar sesion" action="IniciarSesion.xhtml"></h:commandButton>
                                <br/>

                                <h:commandButton 
                                    style="  border-radius: 45px  12px;
                                    font-size: 20px;
                                    background-color: #dd0a07;
                                    color: #ffffff;
                                    box-shadow: inset 0px 0px 100px #dd8e0a;
                                    " 
                                    value="Registrar sesion" action="RegistrarCliente.xhtml"></h:commandButton>
                            </h:panelGrid>
                        </h:panelGrid>


                        <h:panelGrid columns="2" rendered="#{sessionBean.clienteSesion != null}" >
                            Bienvenido <span class="glyphicon glyphicon-user "></span> <h:outputText style="color: #000000; font-size: 20px; text-transform: uppercase" value="#{sessionBean.clienteSesion.nombres} #{sessionBean.clienteSesion.apellidos}"></h:outputText>

                            <h:commandButton 
                                style="
                                border-radius: 45px  12px;
                                font-size: 20px;
                                background-color: #dd0a07;
                                color: #ffffff;
                                box-shadow: inset 0px 0px 100px #dd8e0a;
                                "
                                value="Comprar" action="RegistrarPedido.xhtml"></h:commandButton>

                            <h:commandButton 
                                style="  border-radius: 45px  12px;
                                font-size: 20px;
                                background-color: #dd0a07;
                                color: #ffffff;
                                box-shadow: inset 0px 0px 100px #dd8e0a;
                                " 
                                value="Total productos #{listadoProductosBean.totalcantidadProductos}" action="RegistrarPedido.xhtml"></h:commandButton>


                            <h:outputText></h:outputText>
                            <h:commandButton value="Cerrar session" style=" border-radius:  45px 45px;
                                             font-size: 13px;
                                             background-color: #dd0a07;
                                             color: #ffffff;
                                             box-shadow: inset 0px 0px 100px #269abc;
                                             "  action="#{sessionBean.cerrarSesion()}">
                                <f:ajax listener="#{listadoProductosBean.iniciarBeanCompleto()}"/>
                            </h:commandButton>
                            <h:outputText></h:outputText>
                            <h:commandButton value="Lista Pedidos" style=" border-radius:  45px 45px;
                                             font-size: 13px;
                                             background-color: #dd0a07;
                                             color: #ffffff;
                                             box-shadow: inset 0px 0px 100px #269abc;
                                             "  action="PerfilCliente">
                                <f:ajax listener="#{sessionBean.refrescarInfoCliente()}"/>
                            </h:commandButton>
                            <h:outputText></h:outputText>
                            <!--                            <h:commandButton value="Ver perfil" style=" border-radius: 0px 45px 0px 45px;  
                                                                         font-size: 11px;
                                                                         background-color: #dd0a07;
                                                                         color: #ffffff;
                                                                         box-shadow: inset 0px 0px 100px #269abc;
                                                                         "  >
                                                        </h:commandButton>-->
                        </h:panelGrid>

                    </h:panelGrid>
                </div>
            </div>
        </div>

        <div class="container">

            <div style="background: #dd8e0a;
                 border-radius: 15px 15px 15px 15px;">
                <div role="navigation">
                    <ul class="nav nav-justified">
                        <li><a 
                                style=" 
                                font-size: 20px;
                                border-radius: 15px 0px 0px 15px; 
                                /*                                text-shadow: 1px 2px 2px #D1E3CF;*/
                                /*                                background: #ffffff;*/
                                /*                                border: 1px #ffffff;*/
                                color: #ffffff;
                                box-shadow: inset 54px 54px 100px #dd8e0a;
                                " 
                                href="Home.xhtml">Home</a></li>




                        <li><h:commandButton value="Carnes" 
                                             style="
                                             font-size: 20px;
                                             border-radius: 0px 0px 0px 0px;
                                             width: 100%;
                                             height: 100%;
                                             background: #ffffff;
                                             border: 1px #ffffff;
                                             color: #ffffff;
                                             box-shadow: inset 54px 54px 100px #dd8e0a;
                                             /*                                             text-shadow: 1px 2px 2px #D1E3CF;*/

                                             "
                                             action="#{listadoProductosBean.cambioPaginaProducto(listadoProductosBean.TIPO_PRODUCTO_CARNE)}" ></h:commandButton> </li>
                        <li><h:commandButton value="Frutas y verduras" 
                                             style="
                                             font-size: 20px;
                                             border-radius: 0px 0px 0px 0px;
                                             width: 100%;
                                             height: 100%;
                                             background: #ffffff;
                                             border: 1px #ffffff;
                                             color: #ffffff;
                                             box-shadow: inset 54px 54px 100px #dd8e0a;
                                             " 
                                             action="#{listadoProductosBean.cambioPaginaProducto(listadoProductosBean.TIPO_PRODUCTO_FRUTA_VERDURA)}" ></h:commandButton></li>
                        <li><h:commandButton value="Bebidas" 
                                             style="
                                             font-size: 20px;
                                             border-radius: 15px 15px 15px 0px;
                                             width: 100%;
                                             height: 100%;
                                             background: #ffffff;
                                             border: 1px #ffffff;
                                             color: #ffffff;
                                             box-shadow: inset 54px 54px 100px #dd8e0a;
                                             " 
                                             action="#{listadoProductosBean.cambioPaginaProducto(listadoProductosBean.TIPO_PRODUCTO_BEBIDAS)}" ></h:commandButton></li>
                    </ul>
                </div> 
            </div>

        </div>
    </h:form>

</h:panelGroup>



